<!DOCTYPE html>
<html>
<head>
<title>Physics Diagram of Two Hemispheres</title>
</head>
<body>

<canvas id="physicsCanvas" width="500" height="400"></canvas>

<script>
const canvas = document.getElementById('physicsCanvas');
const ctx = canvas.getContext('2d');

// --- Style settings ---
ctx.lineWidth = 2;
ctx.strokeStyle = 'black';
ctx.fillStyle = 'black';

// --- Parameters ---
const cx = 240; // Center X
const cy = 180; // Center Y
const R1 = 120;
const R2 = 80;

// --- Drawing ---

// Draw left semicircle (sigma1)
ctx.beginPath();
ctx.arc(cx, cy, R1, 0.5 * Math.PI, 1.5 * Math.PI);
ctx.stroke();

// Draw right semicircle (sigma2)
ctx.beginPath();
ctx.arc(cx, cy, R2, -0.5 * Math.PI, 0.5 * Math.PI);
ctx.stroke();

// Draw vertical diameter AB
ctx.beginPath();
ctx.moveTo(cx, cy - R1);
ctx.lineTo(cx, cy + R1);
ctx.stroke();

// Draw dashed lines for radii
ctx.save();
ctx.setLineDash([5, 5]);
ctx.lineWidth = 1.5;

// Dashed line for R1
const angle1 = 1.25 * Math.PI; // 225 degrees
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.lineTo(cx + R1 * Math.cos(angle1), cy + R1 * Math.sin(angle1));
ctx.stroke();

// Dashed line for R2
const angle2 = -0.25 * Math.PI; // -45 degrees
ctx.beginPath();
ctx.moveTo(cx, cy);
ctx.lineTo(cx + R2 * Math.cos(angle2), cy + R2 * Math.sin(angle2));
ctx.stroke();

ctx.restore(); // Restore line dash settings

// --- Labels ---

// Label O
ctx.font = 'italic 24px "Times New Roman"';
ctx.fillText('O', cx - 35, cy + 10);

// Label B
ctx.fillText('B', cx + 8, cy - R1 + 10);

// Label A
ctx.fillText('A', cx + 8, cy + R1 + 10);

// Label R1
ctx.fillText('R', cx - 75, cy + 40);
ctx.font = 'italic 18px "Times New Roman"';
ctx.fillText('1', cx - 62, cy + 46);
ctx.font = 'italic 24px "Times New Roman"';

// Label R2
ctx.fillText('R', cx + 55, cy + 40);
ctx.font = 'italic 18px "Times New Roman"';
ctx.fillText('2', cx + 68, cy + 46);
ctx.font = 'italic 24px "Times New Roman"';

// Label sigma1
ctx.fillText('σ', cx - 115, cy - 70);
ctx.font = 'italic 18px "Times New Roman"';
ctx.fillText('1', cx - 101, cy - 64);
ctx.font = 'italic 24px "Times New Roman"';

// Label sigma2
ctx.fillText('σ', cx + 95, cy - 45);
ctx.font = 'italic 18px "Times New Roman"';
ctx.fillText('2', cx + 109, cy - 39);
ctx.font = 'italic 24px "Times New Roman"';

// --- Caption ---
ctx.font = '24px "SimSun"';
ctx.fillStyle = 'black';
ctx.fillText('电图 1.16.1', cx, cy + R1 + 60);

</script>

</body>
</html>